.legend-frame {
  //position: absolute;
  position: fixed;
  bottom: 10px;
 // right: 10px;
  right: 30% ;
  z-index: 4;
  min-width: 100px;
  img {
    max-height: 18px;
  }

  .legend-header {
    position: relative;
    text-align: center;

    .tixing {
      position: absolute;
      width: 25px;
      height: 17px;
      left: 50%;
      transform: translateX(-46px);
      bottom: -1px;
      //background-image: url("../../../assets/map/legend/三角背景.png");
    
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 50;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      .sjx {
        position: relative;
        width: 17px;
        height: 8px;
      }
    }
    .tixiNew{
      position: absolute;
      width: 90px;
      height: 36px;
      bottom:-8px;
      background-image: url("../../../assets/imgNew/legTu.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 50;
      cursor: pointer;
    }

  }

  .legend-body {
    position: relative;
    // background: rgba(14, 81, 133, 0.46);
    //background-image: url("../../../assets/imgNew/legbg.png");
    background-image: url("../../../assets/imgNew/tooltab.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 8px;
    padding-top:20px;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .tixing {
      position: absolute;
      width: 25px;
      height: 17px;
      left: calc(50% - 13px);
      top: 2px;
      //background-image: url("../../../assets/map/legend/三角背景.png");
      background-image: url("../../../assets/imgNew/legenup.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 50;
      cursor: pointer;
     
    }
    .legend-row {
      display: flex;
      justify-content: flex-start;
      z-index: 3;
      color: #FFFFFF;

      .row {
        padding: 5px;
        display: flex;
        align-items: center;

        .circle {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #0C75EC;
        }

        .imgdiv {
          width: 16px;
          height: 16px;
          // border-radius: 50%;
          // background: #0C75EC;
          background-size: 100% 100%;

          &.cz1 {
            background-image: url("~@/assets/map/village/1.png");
          }

          &.cz2 {
            background-image: url("~@/assets/map/village/2.png");
          }

          &.cz3 {
            background-image: url("~@/assets/map/village/3.png");
          }

          &.cz4 {
            background-image: url("~@/assets/map/village/4.png");
          }
        }

        .griddiv {
          width: 16px;
          height: 16px;
          // margin: 5px 0;
          &.g1 {
            background: #E22222;
          }

          &.g2 {
            background: #FF8D0C;
          }

          &.g3 {
            background: #F0C90B;
          }

          &.g4 {
            background: #00B2FF;
          }
        }

        .linediv {
          width: 16px;
          height: 5px;
          margin: 5px 0;

          &.hd1 {
            background: #E22222;
          }

          &.hd2 {
            background: #FF8D0C;
          }

          &.hd3 {
            background: #F0C90B;
          }

          &.hd4 {
            background: #1c38a1;
          }
        }

        span {
          margin-left: 5px;
          color: #FFFFFF;
          font-size: 12px;
          white-space: nowrap;
        }
      }
    }
  }
}

.legendFrameW32{
  right:32.5%;
} 